摘要
介紹最小可行產品 (MVP) 如何在 coding 裡應用，啟發初學者構思出一個簡單的 code 架構，以降低新手對新領域的心理負擔。接著讓 Gemini CLI 根據 MVP 架構撰寫能跑的程式碼，與如何利用 CLI 進行即時 debug。
在 coding 裡，MVP 代表一個最小又能運作的程式。為什麼先做一個最小功能？因為這能幫助我們確認程式的邏輯基礎與開發方向，避免浪費時間在無止境的 debug。
簡單來說，與其一次構思完所有功能，不如先做出能跑的，再慢慢優化！
但 MVP 不只是「最小骨架程式」，它還有更重要的價值：
例如這篇等等會提到的「拖延表單 + 語錄」MVP，不只能顯示鼓勵語錄，還能延伸成紀錄最常見的拖延原因，或追蹤回訪次數，讓開發從「能跑」進化成「能驗證」與「能成長」。
有想做出的功能卻不知道怎麼下手嗎？將你的想法給 AI 幫你整理點子並編排程式架構吧！
這裡提供一個 MVP 範例給你參考：
不清楚怎麼開 Gemini CLI？這裡給你快速開啟步驟：
gemini就會跑出 Gemini CLI 的對話視窗。當你有一個 MVP 架構，AI 可以幫你照這個架構撰寫基礎程式。今天先以表單＋語錄（無localStorage）舉例：
表單＋原因下拉 → 顯示對應語錄產生一個 index.html：一個輸入想做的事的 input、一個原因下拉選單（太累、沒心情、太多干擾、太難、不知道怎麼開始、其他），按送出後在頁面顯示一則對應原因的鼓勵語錄。
#CLI 生成的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Procrastinator MVP</title>
</head>
<body>
<h1>I want to...</h1>
<input type="text" id="taskInput" placeholder="Enter your task...">
<select id="reasonSelect">
<option value="tired">太累 (Tired)</option>
<option value="mood">沒心情 (Not in the mood)</option>
<option value="distractions">太多干擾 (Too many distractions)</option>
<option value="difficult">太難 (Too difficult)</option>
<option value="dontKnow">不知道怎麼開始 (Don't know how to start)</option>
<option value="other">其他 (Other)</option>
</select>
<button onclick="showQuote()">Submit</button>
<p id="quote"></p>
<script>
function showQuote() {
const reason = document.getElementById('reasonSelect').value;
const quotes = {
tired: "休息不是懶惰，夏天躺在草地上，聽著潺潺流水，看著白雲飄過，絕非浪費時間。 (Rest is not idleness, and to lie sometimes on the grass under trees on a summer's day, listening to the murmur of the water, or watching the clouds float across the sky, is by no means a waste of time.)",
mood: "太陽每天都在提醒我們，我們也可以從黑暗中再次升起，我們也可以照亮自己的光芒。 (The sun is a daily reminder that we too can rise again from the darkness, that we too can shine our own light.)",
distractions: "成功的戰士是普通人，但有著雷射般的專注力。 (The successful warrior is the average man, with laser-like focus.)",
difficult: "河流之所以能切穿岩石，不是因為它的力量，而是因為它的堅持。 (A river cuts through rock, not because of its power, but because of its persistence.)",
dontKnow: "成功的秘訣在於開始。 (The secret of getting ahead is getting started.)",
other: "相信自己能做到，你就已經成功了一半。 (Believe you can and you're halfway there.)"
};
document.getElementById('quote').innerText = quotes[reason];
}
</script>
</body>
</html>
我該怎麼把它跑起來？
想做的事、原因下拉選單：
送出後顯示對應原因的鼓勵語錄：
當系統出現一堆看不懂的紅字時，不要慌張，直接貼給AI，讓他解釋出現什麼問題、怎麼解決，也可以訊問該問題相關的背景知識。
舉例（淺灰字是貼上的報錯紅字內容）：
除錯流程進階版：
是不是很簡單？後續我們會以這個 MVP 架構為基礎一步步架網頁！
iThome鐵人賽
看影片追技術